//@ts-nocheck
import React, { useState, useEffect } from 'react'
import classNames from 'classnames'
import './index.less'

interface IProps {
  data?: Array<any>
}

const InfoIndex: React.FC<IProps> = ({ data }) => {
  const legend = [
    {
      title: '单项排名No.1',
      color: '#FAF4B5'
    },
    {
      title: '单项排名No.2',
      color: '#B5F6DE'
    },
    {
      title: '单项排名No.3',
      color: '#FEDCBB'
    },
    {
      title: '单项排名No.4-7',
      color: '#B8CBFF'
    }
  ]

  const getBgColor = (num) => {
    let color = '#B8CBFF'
    switch (num) {
      case 1:
        color = legend[0].color
        break
      case 2:
        color = legend[1].color
        break
      case 3:
        color = legend[2].color
        break
      default:
        color = legend[3].color
        break
    }
    return color
  }

  return (
    <div className="info-index-wapper">
      <div className="info-index-content">
        {data?.map((item) => {
          return (
            <div className="item" key={item.choiceId}>
              <div className="desc-content">
                <span className="name">{item.content}</span>
                <span className="desc">{item.percent}</span>
              </div>
              <div className="info-index-item">
                {item?.topStatistics?.map((val, index) => {
                  console.log(val.sort)
                  return (
                    <div className="index-item-content" key={index}>
                      <div
                        className="bar"
                        style={{ width: val.percent * 2, background: getBgColor(val.sort) }}
                      />
                      <span className="index-item-number">{val.content}</span>
                      <span className="index-item-percent">{val.percent}</span>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>
      <div className="header-content">
        <div className="index-content">
          <span className="title">信息传递指数(%)</span>
        </div>
        <div className="header-items">
          <div className="item-content">
            <span className="title">印象最深刻(%)</span>
          </div>
          <div className="item-content">
            <span className="title">印象排名前(%)</span>
          </div>
          <div className="item-content">
            <span className="title">印象排名前(%)</span>
          </div>
        </div>
      </div>
      <div className='legend-list'>
        {
          legend.map((i, index) => {
            return (
              <div key={index} className="legend">
                <span style={{ backgroundColor: i.color }} className="block" />
                <span className='title'>{i.title}</span>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}
export default (InfoIndex)
